﻿@inherits BootstrapComponentBase
@page "/tables/tree"
@inject IStringLocalizer<TablesTree> Localizer

<h3>@Localizer["H1"]</h3>
<h4>@Localizer["H2"]</h4>

<Tips class="mt-3">
    <div>@Localizer["P1"]</div>
    <ul class="ul-demo mt-3">
        <li>@((MarkupString)Localizer["P2"].Value)</li>
        <li>@((MarkupString)Localizer["P3"].Value)</li>
        <li>@((MarkupString)Localizer["P4"].Value)</li>
        <li>@((MarkupString)Localizer["P5"].Value)</li>
    </ul>
</Tips>

<p>@((MarkupString)Localizer["P6"].Value)</p>
<p>@((MarkupString)Localizer["P7"].Value)</p>
<p>@((MarkupString)Localizer["P8"].Value)</p>
<p>@((MarkupString)Localizer["P9"].Value)</p>

<DemoBlock Title="@Localizer["P10"]" Introduction="@Localizer["P11"]" Name="TreeData">
    <Table TItem="TreeFoo" IsBordered="true" IsStriped="true" HeaderStyle="@TableHeaderStyle.Light"
           Items="@TreeItems" IsTree="true" TreeNodeConverter="@TreeNodeConverter" OnTreeExpand="@OnTreeExpand">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="360" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["P12"]" Introduction="@Localizer["P13"]" Name="Level">
    <Tips>
        <div>@((MarkupString)Localizer["P14"].Value)</div>
    </Tips>
    <p>((MarkupString)Localizer["P15"].Value)</p>
    <Table TItem="TreeFoo" IsBordered="true" IsStriped="true" HeaderStyle="@TableHeaderStyle.Light" IndentSize="8"
           Items="@TreeItems" IsTree="true" TreeNodeConverter="@TreeNodeConverter" OnTreeExpand="@OnTreeExpand">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="360" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["P16"]" Introduction="@Localizer["P17"]" Name="EditTree">
    <Table TItem="TreeFoo" IsBordered="true" HeaderStyle="@TableHeaderStyle.Light"
           ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true" IsStriped="true"
           OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync"
           IsTree="true" TreeNodeConverter="@TreeNodeConverter" OnTreeExpand="@OnTreeExpand">
        <TableColumns>
            <TableColumn @bind-Field="@context.Id" />
            <TableColumn @bind-Field="@context.Name" Width="360" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["P18"]" Introduction="@Localizer["P19"]" Name="Icon">
    <Tips>
        <div>@((MarkupString)Localizer["20"].Value)</div>
    </Tips>
    <p>@((MarkupString)Localizer["P21"].Value)</p>
    <Table TItem="TreeFoo" IsBordered="true" IsStriped="true" HeaderStyle="@TableHeaderStyle.Light" TreeIcon="fa-solid fa-circle-chevron-right"
           Items="@TreeItems" IsTree="true" TreeNodeConverter="@TreeNodeConverter" OnTreeExpand="@OnTreeExpand">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="360" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
    </Table>
</DemoBlock>
